<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    img {
      display: block;
      margin-bottom: 50px;
      width: 400px;
      height: 400px;
    }
  </style>
</head>

<body>
  <img src="./img/loading.gif" data-original="./img/1.jpg" alt="" />
  <img src="./img/loading.gif" data-original="./img/2.jpg" alt="" />
  <img src="./img/loading.gif" data-original="./img/3.jpg" alt="" />
  <img src="./img/loading.gif" data-original="./img/4.jpg" alt="" />
  <img src="./img/loading.gif" data-original="./img/5.jpg" alt="" />
  <img src="./img/loading.gif" data-original="./img/6.jpg" alt="" />
  <img src="./img/loading.gif" data-original="./img/7.jpg" alt="" />
  <img src="./img/loading.gif" data-original="./img/8.jpg" alt="" />
  <img src="./img/loading.gif" data-original="./img/9.jpg" alt="" />
  <img src="./img/loading.gif" data-original="./img/10.jpg" alt="" />
  <img src="./img/loading.gif" data-original="./img/0.jpg" alt="" />
</body>

<!-- <script>
  var n = 0,
    imgNum = $("img").length,
    img = $("img");

  function lazyload(event) {
    for (var i = n; i < imgNum; i++) {
      if (
        img.eq(i).offset().top <
        parseInt($(window).height()) + parseInt($(window).scrollTop())
      ) {
        if (img.eq(i).attr("src") == "./img/loading.gif") {
          var src = img.eq(i).attr("data-original");
          img.eq(i).attr("src", src);

          n = i + 1;
        }
      }
    }
  }
  lazyload();
  $(window).scroll(lazyload);
</script>
 -->
<script src="http://unpkg.zhimg.com/jquery"></script>
<script src="./lazyload_jquery.js"></script>
<script>
  /* 调用插件*/
  /* $(function() {
    $("img.lazy").lazyload();
  }); */
  $(window).on("load scroll", function() {
    $("img").lazyLoad("data-original");
  });
</script>
